<template>
    <div>
        <el-container>
            <el-aside width="210px">
                <el-row style="width: 210px">
                    <el-col :span="24" style="
                background-color: #019ba0;
                width: 210px;
                height: 35px;
                text-align: auto;
                color: #ffffff;
              ">
                        <div class="grid-content" style="text-align: left; font-size: 24px">
                            设备属性管理
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <el-menu default-active="1-1" class="el-menu-vertical-demo">
                            <el-submenu :index="1">
                                <template slot="title">
                                    <i class="el-icon-user"></i>
                                    <span>设备属性</span>
                                </template>
                                <el-menu-item :index="1 + '-' + (index + 1)" v-for="(menu, index) in stockList" @click="showProperty(menu.id)" :key="index">
                                    <router-link to="">{{ menu.name }}</router-link>
                                    <!-- <el-menu-item :index="(index + 1) + '-' + (index2 + 1) + '-' + (index3 + 1)" v-for="(c, index3) in child.children" :key="c.id">
                                    <router-link :to="c.link">{{ c.name }}</router-link>
                                </el-menu-item> -->
                                </el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-container>
                <el-main>
                    <div style="width: 100%; height: 99%; margin-top: 2px">
                        <div style="width: 48%; height: 98%; float: left; margin-left: 5px">
                            <div style="
                    width: 99%;
                    height: 100%;
                    margin: 2px 2px;
                    border: 4px solid #019ba0;
                  ">
                                <el-row>
                                    <el-col :span="24">
                                        <div style="
                          text-align: center;
                          margin: 10px;
                          font-size: 20px;
                          color: #019ba0;
                        ">
                                            <i class="el-icon-s-claim"></i>静态属性
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-table class="tab1" :data="staticProperty" stripe height="500" style="width: 95%">
                                    <el-table-column prop="describe" label="属性" width="230"></el-table-column>
                                    <el-table-column prop="unit" label="单位" width="100"></el-table-column>
                                    <el-table-column label="操作" width="150">
                                        <template slot-scope="scope">
                                            <el-button size="mini" @click="goStaUpdate(scope.row)" round>修改</el-button>
                                            <el-popconfirm cancelButtonText="取消" confirmButtonText="确定" icon="el-icon-info" iconColor="red" title="确定要删除吗？" @confirm="delSta(scope.row.id)">
                                                <el-button slot="reference" type="danger" size="mini" round>删除</el-button>
                                            </el-popconfirm>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-row>
                                    <el-col :span="24" style="text-align: center; margin-top: 10px">
                                        <el-button type="success" @click="
                                            div.stockid = xxxid;
                                        doName = '添加静态属性';
                                        addVisible = true;
                                        " class="btn1" plain>添加</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div style="width: 50%; height: 98%; float: left; margin-left: 7px">
                            <div style="
                    width: 99%;
                    height: 100%;
                    margin: 2px 2px;
                    border: 4px solid #019ba0;
                  ">
                                <el-row>
                                    <el-col :span="24">
                                        <div style="
                          text-align: center;
                          margin: 10px;
                          font-size: 20px;
                          color: #019ba0;
                        ">
                                            <i class="el-icon-loading"></i>实时属性
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-table class="tab1" :data="dynamicProperty" stripe height="500" style="width: 95%">
                                    <el-table-column prop="describe" label="属性" width="250"></el-table-column>
                                    <el-table-column prop="unit" label="单位" width="100"></el-table-column>
                                    <el-table-column label="操作" width="150">
                                        <template slot-scope="scope">
                                            <el-button size="mini" @click="goSuvUpdate(scope.row)" round>修改</el-button>
                                            <el-popconfirm cancelButtonText="取消" confirmButtonText="确定" icon="el-icon-info" iconColor="red" title="确定要删除吗？" @confirm="delSuv(scope.row.id)">
                                                <el-button slot="reference" type="danger" size="mini" round>删除</el-button>
                                            </el-popconfirm>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-row>
                                    <el-col :span="24" style="text-align: center; margin-top: 10px">
                                        <el-button type="success" @click="
                                            div.stockid = xxxid;
                                        doName = '添加动态属性';
                                        addVisible = true;
                                        " class="btn1" plain>添加</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <el-dialog :title="tit" :visible.sync="addVisible" :closeOnClickModal="false" :show-close="false">
                            <el-form :model="div" :rules="rules" ref="ruleForm">
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item label="属性名称" label-width="80px" prop="describe">
                                            <el-input v-model="div.describe" placeholder="请输入属性名"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="计量单位" label-width="80px" prop="unit">
                                            <el-input v-model="div.unit" placeholder="请输入计量单位"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="
                                    addVisible = false;
                                closeForm('ruleForm');
                                ">关 闭</el-button>
                                <el-button type="primary" @click="doDev('ruleForm')">{{
                                    doName
                                }}</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isStaticUpdate: false,
            isDynamicUpdate: false,
            xxxid: 0,
            stockId: 0,
            stockList: [],
            staticProperty: [],
            dynamicProperty: [],
            addVisible: false,
            tit: "",
            doName: "",
            url: "",
            div: {
                id: "",
                describe: "",
                unit: "",
                stockid: "",
            },
            rules: {
                describe: [
                    {
                        required: true,
                        message: "不能为空",
                        trigger: "blur",
                    },
                ],
                unit: [
                    {
                        required: true,
                        message: "不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        showProperty(id) {
            this.xxxid = id;
            this.dialogVisible = true;
            this.$axios
                .get("/Property/getStaticAll?id=" + id)
                .then((result) => {
                    let vo = result.data;
                    this.staticProperty = vo.data.sp;
                    this.dynamicProperty = vo.data.dp;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        addSta() {
            this.$axios
                .post("/Property/addStatic", this.div)
                .then((result) => {
                    if (result.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: result.data.message,
                        });
                        this.addVisible = false;
                        this.list();
                        this.div = {
                            id: "",
                            describe: "",
                            unit: "",
                            stockid: "",
                        };
                        this.showProperty(this.xxxid);
                    } else {
                        this.$message.error(result.data.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        closeForm(ruleForm) {
            if (this.$refs[ruleForm]) {
                this.$refs[ruleForm].resetFields();
            } else {
                console.error(`未找到 ref 为 ${ruleForm} 的元素`);
            }
        },
        delSta(id) {
            this.$axios
                .delete("/Property/delStatic/" + id)
                .then((result) => {
                    if (result.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: result.data.message,
                        });
                        this.showProperty(this.xxxid);
                    } else {
                        this.$message.error(result.data.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            this.list();
        },
        addSuv() {
            this.$axios
                .post("/Property/addSurvey", this.div)
                .then((result) => {
                    if (result.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: result.data.message,
                        });
                        this.addVisible = false;
                        this.div = {
                            id: "",
                            describe: "",
                            unit: "",
                            stockid: "",
                        };
                        this.list();
                        this.showProperty(this.xxxid);
                    } else {
                        this.$message.error(result.data.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        delSuv(id) {
            this.$axios
                .delete("/Property/delSurvey/" + id)
                .then((result) => {
                    if (result.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: result.data.message,
                        });
                        this.showProperty(this.xxxid);
                    } else {
                        this.$message.error(result.data.message);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            this.list();
        },
        doDev(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    if (this.doName == "添加静态属性") {
                        this.addSta();
                    } else if (this.doName == "添加动态属性") {
                        this.addSuv();
                    } else if (this.doName == "修改静态属性") {
                        this.$axios.post("/Property/updateStatic", this.div).then((res) => {
                            this.showProperty(this.xxxid);
                            if (this.isStaticUpdate && this.autoClose) {
                                this.addVisible = false;
                            }
                        });
                    } else if (this.doName == "修改动态属性") {
                        this.$axios.post("/Property/updateSurvey", this.div).then((res) => {
                            let index = this.dynamicProperty.findIndex(item => item.id === this.div.id);
                            if (index !== -1) {
                                this.dynamicProperty.splice(index, 1, this.div);
                            }
                            if (this.isDynamicUpdate && this.autoClose) {
                                this.addVisible = false;
                            }
                            this.showProperty(this.xxxid);
                        });
                    } else {
                        console.error("未指定操作类型");
                    }
                } else {
                    console.error("表单验证不通过");
                }
            });
        },
        sucMsg(msg) {
            this.$message({
                message: msg,
                offset: 250,
                duration: 1000,
                type: "success",
            });
        },
        errorMsg(msg) {
            this.$message.error({
                message: msg,
                offset: 150,
                duration: 1000,
            });
        },
        goStaUpdate(device) {
            this.tit = "静态属性修改";
            this.doName = "修改静态属性";
            this.url = "/device/updateStatic";
            this.div.id = device.id;
            this.div.describe = device.describe;
            this.div.unit = device.unit;
            this.div.stockId = device.stockId;
            this.addVisible = true;
            this.isStaticUpdate = true;
            this.isDynamicUpdate = false;
            this.autoClose = true;
        },
        goSuvUpdate(device) {
            this.tit = "动态属性修改";
            this.doName = "修改动态属性";
            this.url = "/device/updateSurvey";
            this.div.id = device.id;
            this.div.describe = device.describe;
            this.div.unit = device.unit;
            this.div.stockId = device.stockId;
            this.addVisible = true;
            this.isStaticUpdate = false;
            this.isDynamicUpdate = true;
            this.autoClose = true;
        },
        list() {
            this.$axios
                .get("/basestock/findMenu")
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.stockList = vo.data;
                        console.log(this.stockList);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    mounted() {
        this.list();
    },
};
</script>


<style scoped="scoped">
.el-container {
    margin: 0;
    padding: 0;
    margin-top: 5px;
    margin-left: 5px;
    width: 1300px;
    height: 640px;
}

.el-aside {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border: 5px solid #f3f3f3;
    text-align: center;
}

.el-main {
    margin: 0;
    padding: 0;
    margin-left: 3px;
    border: 5px solid #f3f3f3;
    background-color: #ffffff;
    color: #333;
}

.is-left {
    font-size: 20px;
}
</style>